import { Routes, Route } from "react-router-dom";

import Home from "./pages/Home";
import Pins from "./pages/Pins";
import Course from "./pages/Course";

export default function App() {
  /*
    当路由路径是 /，希望加载 Home 组件显示
    当路由路径是 /pins，希望加载 Pins 组件显示
    当路由路径是 /course，希望加载 Course 组件显示
  */
  return (
    /*
      Routes: 渲染第一个满足条件路由Route
    */
    <Routes>
      {/* 
        路由组件：通过Route加载的组件，就是路由组件

        Route组件：
          根据路由路径，加载渲染路由组件
          匹配路由路径看是否与path相同，相同就会渲染element

        Route必须配合Routes一起使用
      */}
      <Route path="/" element={<Home />} />
      <Route path="/pins" element={<Pins />} />
      <Route path="/course" element={<Course />} />
    </Routes>
  );
}
